<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Pay By Ride - Emulador móvil</title>

<link rel="stylesheet" type="text/css" href="../css/paybyride.css" media="screen" />
<script type="text/javascript" src="../js/jquery-min.js"></script>
<script type="text/javascript" src="../js/paybyride-jq-extensions.js"></script>
<script type="text/javascript" src="../js/paybyride-mobile-emulator.js"></script>

</head>

<body>

	<input type="hidden" id="userId" value="<c:out value="${param['userId'] }"/>">
	<input type="hidden" id="sessionToken" value="<c:out value="${param['sessionToken'] }"/>">

	<div class="div-header">
		<div class="div-header-content">
			<div class="div-header-logo">
				<a href="/GeoUdimaServer"><img src="../images/header-logo.png" border="0"></a>
			</div>
			<div class="div-header-text">
				Emulador móvil
			</div>
			<div class="div-header-mobile-logo">
				<img src="../images/mobile-logo.png">
			 </div>
		</div>
	</div>

	<div class="div-content">
		<div id="div-hello-user">
			<div id="div-hello-user-text"></div>
			<div id="div-hello-user-buttons">
				<img id="btn-user-logout" src="../images/logout-button.png" title="Cerrar sesión" class="img-button">
			</div>
		</div>
		
		<div class="div-left-column-mobile-emulator">
			<div id="div-user-editable-data" class="tool-section tool-section-scrollable">
				<div class="tool-section-header">Datos del usuario</div>
				<div id="div-user-data" class="tool-section-content">
					<div id="div-user-update-error-unknown" class="div-error-message error"></div>
					
					<form id="frmUpdateUser" onsubmit="return false">
						
						<div class="div-user-data-edit-row">
							<div class="field-name">Nombre de usuario</div>
							<div class="field-value"><input type="text" name="userName" class="disabled" disabled></div>
						</div>
						<div id="div-user-update-error-user" class="div-error-message error"></div>
						
						<div class="div-user-data-edit-row">
							<div class="field-name">Nombre</div>
							<div class="field-value"><input type="text" name="firstName"></div>
						</div>
						<div id="div-user-update-error-firstName" class="div-error-message error"></div>
						
						<div class="div-user-data-edit-row">
							<div class="field-name">Apellidos</div>
							<div class="field-value"><input type="text" name="lastName"></div>
						</div>
						<div id="div-user-update-error-lastName" class="div-error-message error"></div>
						
						<div class="div-user-data-edit-row">
							<div class="field-name">Email</div>
							<div class="field-value"><input type="text" name="email"></div>
						</div>
						<div id="div-user-update-error-email" class="div-error-message error"></div>
						
						<div class="div-user-data-edit-row">
							<div class="field-name">Tipo de vehículo</div>
							<div class="field-value">
								<select name="vehicleTypeStr">
									<option value="">-- Seleccione un tipo de vehículo --</option>
									<option value="STANDARD">Estándar</option>
									<option value="SPORT">Deportivo</option>
									<option value="SUV">Todo terreno</option>
									<option value="MOTO">Motocicleta</option>
									<option value="SCOOTER">Scooter</option>
								</select>
							</div>
						</div>
						<div id="div-user-update-error-vehicleType" class="div-error-message error"></div>

						<div class="div-user-data-edit-row">
							<div class="field-name field-name-long">Tiempo de envío de datos GPS (milisegundos)</div>
							<div class="field-value field-value-short">
								<input type="text" name="fetchGpsLapseTimeStr" class="input-number">
							</div>
						</div>
						<div id="div-user-update-error-fetchGpsLapseTime" class="div-error-message error"></div>
						
						<div class="tool-buttons">
							<a id="btn-user-update-do" class="button-green">Grabar</a>
							&nbsp;&nbsp;
							<a id="btn-user-update-cancel" class="button-orange">Descartar cambios</a>
						</div>
					
					</form>
					<input type="hidden" id="fetchGpsLapseTimeHidden">
				</div>	
				
				<div class="tool-section-header margin-top-plus">Cambiar contraseña</div>
				<div id="div-user-password" class="tool-section-content">
						
					<form id="frmUpdatePassword" onsubmit="return false">
					
						<div class="div-user-data-edit-row">
							<div class="field-name">Contraseña actual</div>
							<div class="field-value"><input type="password" name="password"></div>
						</div>
						<div id="div-user-update-error-password" class="div-error-message error"></div>
						
						<div class="div-user-data-edit-row">
							<div class="field-name">Nueva contraseña</div>
							<div class="field-value"><input type="password" name="newPassword"></div>
						</div>
						<div id="div-user-update-error-password1" class="div-error-message error"></div>
						
						<div class="div-user-data-edit-row">
							<div class="field-name">Repita la contraseña</div>
							<div class="field-value"><input type="password" name="newPasswordRepeated"></div>
						</div>
						<div id="div-user-update-error-password2" class="div-error-message error"></div>
						
						<div class="tool-buttons">
							<a id="btn-user-updatepwd-do" class="button-green">Cambiar contraseña</a>
						</div>
						
					</form>
					
				</div>
			</div>
		</div>	
		
		<div class="div-right-column-mobile-emulator">
			
			<div id="div-gps-emulator-map" class="tool-section tool-section-scrollable">
				<div class="tool-section-header">
					Emulador GPS
				</div>
				<div id="div-emulator-map-data" class="tool-section-content">
					<div id="div-emulator-map-init-time">
						Inicio de la emulación: 
						&nbsp;fecha&nbsp;<input id="emulation-init-date" class="input-date">
						&nbsp;hora&nbsp;<input id="emulation-init-time" class="input-time">
					</div>
					<div id="map-canvas"></div>
				</div>
			</div>
			
			<div id="div-gps-emulator-locations" class="tool-section tool-section-scrollable">
				<div class="tool-section-header">
					Datos GPS simulados
					<span id="gps-emulator-controls" class="tool-section-buttons">
						<a id="btn-gps-emulator-send-data" class="button-green button-small">Enviar datos al servidor</a>
						<a id="btn-gps-emulator-clear-data" class="button-orange button-small">Borrar datos</a>
					</span>
				</div>
				<div id="div-gps-emulator-locations-data" class="tool-section-content">
				<div id="div-emulation-gpsdata-store-error" class="div-error-message error"></div>
				No hay datos gps
				</div>
			</div>
		</div>
		
		
	</div>

</body>

</html>